<template>
  <el-dialog
    v-model="visibility"
    :title="config.button.text.view"
    width="65%"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item label="主体公司简称"> {{ props.rowData.baseCompanySimpleName }} </el-descriptions-item>
      <el-descriptions-item label="资金方简称"> {{ props.rowData.baseCapitalPartySimpleName }} </el-descriptions-item>
      <el-descriptions-item label="仓库名称"> {{ props.rowData.baseWarehouseName }} </el-descriptions-item>
      <el-descriptions-item label="资金仓库名称"> {{ props.rowData.name }} </el-descriptions-item>
      <el-descriptions-item label="启用状态">
        {{ props.rowData.isEnable ? config.button.text.enable : config.button.text.stop }}
      </el-descriptions-item>
      <el-descriptions-item label="日化率">
        {{ props.rowData.dailyChemicalRate }}<span
          v-if="props.rowData.dailyChemicalRate">%</span>
      </el-descriptions-item>
      <el-descriptions-item label="备注"> {{ props.rowData.remark }} </el-descriptions-item>
      <el-descriptions-item label="我司预付款百分比">
        {{ props.rowData.companyFirstPayPercent }}<span
          v-if="props.rowData.companyFirstPayPercent">%</span>
      </el-descriptions-item>
      <el-descriptions-item label="资方预付款百分比">
        {{ props.rowData.capitalFirstPayPercent }}<span
          v-if="props.rowData.capitalFirstPayPercent">%</span>
      </el-descriptions-item>
      <el-descriptions-item label="资方尾款百分比">
        {{ props.rowData.capitalEndPayPercent }}<span
          v-if="props.rowData.capitalEndPayPercent">%</span>
      </el-descriptions-item>
      <el-descriptions-item label="创建人"> {{ props.rowData.createUserRealName }} </el-descriptions-item>
      <el-descriptions-item label="创建时间"> {{ formatDateTime(props.rowData.createTime) }} </el-descriptions-item>
      <el-descriptions-item label="修改人"> {{ props.rowData.updateUserRealName }} </el-descriptions-item>
      <el-descriptions-item label="上次修改时间"> {{ formatDateTime(props.rowData.updateTime) }} </el-descriptions-item>
    </el-descriptions>
    <div style="margin-top: 10px;">
      <div class="table-header">
        <div class="table-title">仓库费列表：</div>
      </div>
      <el-table
        v-if="!appStore.isPhone"
        max-height="200px"
        :data="tableData"
        style="width: 100%"
        border="1">
        <el-table-column
          prop="name"
          label="仓储费名称" />
        <el-table-column
          prop="storageChargeFee"
          label="仓储费（元/吨）" />
        <el-table-column
          prop="isTimeSection"
          label="是否按照时间段">
          <template #default="scope">
            <span>{{ scope.row.isTimeSection ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          :resizable="false">
          <template #default="{ row }">
            <el-button
              type="success"
              @click="handleView(row)">
              查看时间段分段列表
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-card
        v-else
        class="table_card info-card"
        v-for="item in tableData"
        :key="item.id"
        @click="handleView(item)">
        <div class="info-item">
          <div class="info-title">仓储费名称：</div>
          <div class="info-main">{{ item.name }}</div>
        </div>
        <div class="info-item">
          <div class="info-title">仓储费（元/吨）：</div>
          <div class="info-main">{{ item.storageChargeFee }}</div>
        </div>
        <div class="info-item">
          <div class="info-title">是否按照时间段：</div>
          <div class="info-main">{{ item.isTimeSection ? '是' : '否' }}</div>
        </div>
      </el-card>
    </div>
    <template #footer>
      <div>
        <el-button
          type="warning"
          v-if="appStore.isPhone"
          @click="editInfo">
          {{ config.button.text.edit }}
        </el-button>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
      </div>
    </template>
    <!-- 仓储费查看 -->
    <sonView
      ref="sonViewRef"
      :sonRowData="sonRowData" />
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import { useAppStore } from "@/stores/app"
import sonView from "./sonView.vue"
import { formatDateTime } from "@/common/utils/date";
import ApiBaseCapitalWarehouse from "@/api/modules/capital-ware-house"

const appStore = useAppStore()
const visibility = ref(false)
const sonViewRef = ref()
const sonRowData = ref({})

const props = defineProps(["rowData"])
//仓储费列表
const tableData = ref([]);

const emits = defineEmits(["editInfo"])
const editInfo = () => {
  visibility.value = false;
  emits("editInfo", props.rowData);
}

//获取仓储费列表
const getStorageChargeList = async (id) => {
  if (id) {
    const res = await ApiBaseCapitalWarehouse.getStorageChargeList({ baseCapitalWarehouseId: id }, {
      pageNum: 1,
      pageSize: -1,
    });
    tableData.value = res.data.records;
  } else {
    tableData.value = [];
  }
}

//查看时间段分段列表
const handleView = (row) => {
  sonViewRef.value.visibility = true
  sonRowData.value = { ...row, showEdit: false }
}


watch(() => visibility.value, (newVal) => {
  if (newVal) {
    getStorageChargeList(props.rowData?.id || "");
  }
}, { immediate: true })

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
.table-title {
  font-weight: bold;
  margin-bottom: 5px;
}

:deep(.el-descriptions__cell.is-bordered-label) {
  min-width: 160px !important;
}

:deep(.el-descriptions__cell.is-bordered-content) {
  min-width: 100px !important;
}

.info-card {
  // padding: 10px;
  margin-bottom: 3px;

  .info-item {
    display: flex;
    padding: 5px 0;
    align-items: end;

    .info-title {
      width: 120px;
      color: #999;
    }

    .info-main {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
